<template>
  <el-dialog :title="title" width="85%" :visible.sync="visible" destroy-on-close @close="closeClick">
    <el-form :inline="true" :model="recordInfo.queryForm" class="demo-form-inline">
      <el-row>
        <el-col>
          <el-form-item label="机构编号">
            <el-input v-model="recordInfo.queryForm.notSubmit.searchOrganizationId" clearable />
          </el-form-item>
          <el-form-item label="机构名称">
            <el-select
              v-model="recordInfo.queryForm.notSubmit.organizationNameSearchOrganizationId"
              clearable
              filterable
              placeholder="请输入查找"
              remote
              reserve-keyword
              :remote-method="searchOrganization"
              :loading="searchOrganizationLoading"
              @clear="clearOrganization"
            >
              <el-option
                v-for="item in organizationList"
                :key="item.organizationId"
                :label="item.organizationName"
                :value="item.organizationId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input v-model="recordInfo.queryForm.userName" clearable />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="recordInfo.queryForm.mobile" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getRecordList">搜索</el-button>
          </el-form-item>
        </el-col>
        <el-col v-if="false === singleSelect">
          <el-form-item>
            <el-button type="primary" @click="handleAdd()">添加</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      ref="multipleTable"
      key="index"
      v-loading="recordInfo.loading"
      class="table-default"
      :data="recordInfo.list"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="false === singleSelect" type="selection" width="43" align="center" />
      <el-table-column v-if="true === singleSelect" label="选择" width="49" align="center">
        <template v-slot="scope">
          <div class="list-operate-menu">
            <i class="el-icon-success check-button" @click="confirmSelect(scope.row)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="organizationId" label="所属机构编号" width="169" align="center" />
      <el-table-column prop="organizationName" label="所属机构名称" align="center" />
      <el-table-column prop="userId" label="用户编号" align="center" />
      <el-table-column prop="userName" label="用户姓名" align="center" />
      <el-table-column prop="mobile" label="手机号" align="center" />
      <el-table-column prop="departmentName" label="部门" align="center" />
      <el-table-column prop="positionName" label="岗位" align="center" />
    </el-table>
    <pagination
      v-show="recordInfo.total > 0"
      :total="recordInfo.total"
      :page.sync="recordInfo.queryForm.page"
      :limit.sync="recordInfo.queryForm.pageSize"
      @pagination="getRecordList"
    />
  </el-dialog>
</template>

<script>
import ListMixin from '@/mixins/modules/list'
import filters from '@/filters/index'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  filters: { ...filters },
  mixins: [ListMixin],
  props: {
    functionSort: {
      type: String,
      default: ''
    }, relatedId: {
      type: String,
      default: ''
    }, organizationType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      title: '选择用户',
      visible: false,
      singleSelect: false,
      searchOrganizationLoading: false,
      organizationList: [],
      recordInfo: {
        queryForm: {
          returnUserDetail: true,
          page: 1,
          pageSize: 5,
          returnCount: true,
          userName: '',
          notSubmit: {
            searchOrganizationId: '',
            organizationNameSearchOrganizationId: ''
          }
        },
        requestUrl: this.$api.getUserList,
        loading: false,
        list: [],
        total: 0
      },
      beforeRequest() {
        delete this.recordInfo.queryForm.organizationId
        if (this.recordInfo.queryForm.notSubmit.organizationNameSearchOrganizationId !== '' && this.recordInfo.queryForm.notSubmit.searchOrganizationId !== '') {
          this.$commonUtils.showWarningToast('机构编号和名称不能同时查询')
          return false
        }
        if (this.recordInfo.queryForm.notSubmit.organizationNameSearchOrganizationId !== '') {
          this.recordInfo.queryForm.organizationId = this.recordInfo.queryForm.notSubmit.organizationNameSearchOrganizationId
        } else if (this.recordInfo.queryForm.notSubmit.searchOrganizationId !== '') {
          this.recordInfo.queryForm.organizationId = this.recordInfo.queryForm.notSubmit.searchOrganizationId
        }
      },
      callbackFunc: null,
      autoGetList: false,
      multipleSelection: []
    }
  },
  computed: {},
  methods: {
    searchOrganization(query) {
      this.searchOrganizationLoading = true
      this.$api.getOrganizationList({ returnCount: true, page: 1, pageSize: 10, organizationName: query }, undefined).then(res => {
        this.searchOrganizationLoading = false
        this.organizationList = res.list
      })
    },
    clearOrganization() {
      this.organizationList = []
    },
    init(callback, option) {
      this.multipleSelection = []
      this.callbackFunc = callback
      this.visible = true
      this.recordInfo.queryForm.userName = ''
      this.recordInfo.total = 0
      this.recordInfo.list = []
      // let functionSort
      // if (undefined !== option && undefined !== option.functionSort) {
      //   functionSort = option.functionSort
      // } else {
      //   functionSort = this.functionSort
      // }
      if (undefined !== option && undefined !== option.singleSelect) {
        this.singleSelect = option.singleSelect
      } else {
        this.singleSelect = false
      }
      this.recordInfo.queryForm.organizationType = this.organizationType
      if (this.organizationType === '5') {
        this.recordInfo.requestUrl = this.$api.getStoreOrganizationList
      }
      this.getRecordList(true)
    },
    confirmSelect(item) {
      this.visible = false
      if (this.callbackFunc) {
        this.callbackFunc([item])
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleAdd() {
      if (this.multipleSelection.length === 0) {
        this.$commonUtils.showWarningToast('请勾选要添加的项')
        return
      }
      this.visible = false
      if (this.callbackFunc) {
        this.callbackFunc(this.multipleSelection)
      }
    },
    closeClick() {
      this.recordInfo.queryForm.page = 1
    }
  }
}
</script>

<style lang="scss" scoped>
.check-button {
  font-size: 20px !important;

  &:hover {
    color: #3a8ee6;
  }
}
</style>
